<template>
  <div class="container">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="身份验证"></el-step>
      <el-step title="新手机号"></el-step>
    </el-steps>
    <el-row>
      <el-col :span="9" :xs="2"> </el-col>
      <el-col :xs="20" :span="6">
        <!-- 步骤1----------------------------------------------------------------------------------------------------- -->
        <div class="box" v-show="'0'==active">
          <div class="input1">
            <el-input v-model="oldPhone" placeholder="旧手机号" clearable size="large" maxlength="11">
              <template #prepend>+86</template>
            </el-input>
          </div>
          <div class="input2">
            <el-input v-model="oldCode" placeholder="验证码" size="large" maxlength="4">
              <template #append>
                <el-button v-show="!codeTimeShow" @click="getPhoneCode('old')">获取验证码</el-button>
                <span v-show="codeTimeShow">{{codeTime}}</span>
              </template>
            </el-input>
          </div>

          <el-button class="nextbtn" type="success" :disabled="false" @click="oldAccess">下一步
          </el-button>
        </div>
        <!-- 步骤2----------------------------------------------------------------------------------------------------- -->
        <div class="box" v-show="'1'==active">
          <div class="input1">
            <el-input v-model="newPhone" placeholder="新手机号" clearable size="large" maxlength="11">
              <template #prepend>+86</template>
            </el-input>
          </div>
          <div class="input2">
            <el-input v-model="newCode" placeholder="验证码" size="large" maxlength="4">
              <template #append>
                <el-button v-show="!codeTimeShow" @click="getPhoneCode('new')">获取验证码</el-button>
                <span v-show="codeTimeShow">{{codeTime}}</span>
              </template>
            </el-input>
          </div>
          <el-button class="prebtn" :disabled="false" @click="--active">上一步</el-button>
          <el-button class="nextbtn" type="success" :disabled="false" @click="updateNewPhone">确定
          </el-button>
        </div>

      </el-col>
      <el-col :span="9" :xs="2"> </el-col>
    </el-row>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus';
export default {
  data () {
    return {
      active: 0,
      newPhone: "",
      newCode: "",
      oldPhone: "",
      oldCode: "",
      codeTime: 60,
      codeTimeShow: false,
      name: "",
      password: "",
      password1: ""
    }
  },
  mounted () {
    this.oldPhone = this.$route.params.phone;
  },
  methods: {
    oldAccess () {
      if (this.oldCode == "" || this.oldCode == undefined) {
        ElMessage({
          message: "请输入四位数验证码",
          grouping: true,
          type: 'error',
          duration: 2000,
        });
        return;
      }
      this.$axios.post("/user/phone/" + this.oldCode).then(res => {
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          });
          ++this.active;
        }
      })
    },
    updateNewPhone () {
      if (this.newCode == "" || this.newCode == undefined) {
        ElMessage({
          message: "请输入四位数验证码",
          grouping: true,
          type: 'error',
          duration: 2000,
        });
        return;
      }
      this.$axios.put("/user/phone/" + this.newPhone + "/" + this.newCode).then(res => {
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          });
          ++this.active;
          this.$router.push("/mineinfo");
        }
      })
    },
    //发送验证码
    getPhoneCode (flag) {
      this.changeCodeTime();
      const params = new URLSearchParams();
      if (flag == "old") {
        params.append('phone', this.oldPhone);
      }
      if (flag == "new") {
        params.append('phone', this.newPhone);
      }
      this.$axios.post('/user/smscode', params).then((res) => {
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 3000,
          })
        } else {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'error',
            duration: 2000,
          })
        }
      })
    },
  }
}
</script>

<style scoped>
.box {
  position: relative;
  margin-top: 40px;
}
.input1,
.input2 {
  padding: 10px;
  /* margin: 0 auto; */
  width: 90%;
}
.nextbtn {
  margin-top: 30px;
  position: absolute;
  right: 0px;
}
.prebtn {
  margin-top: 30px;
  position: absolute;
  left: 0px;
}
</style>